<template>
	<!-- 新版本：父组件直接传递所有参数，组件内部生成所需要补充的区块 -->
	<view class="white-box-list">
		<slot></slot>
		<view v-for="(item,index) in nums" class="white-lastmusic"></view>
	</view>
</template>

<script>
	export default {
		props: {
			outerLength: Number,
			inLength:Number,
			listLen: Number,
		},
		data() {
			return {
				nums: 0,
				}
		},
		mounted() { //完成模板渲染后首次赋值
		},
		watch: { //观察rootFontsize的变化，限制了最大16px后屏幕再大也不缩放了
			nums(e) {
				console.log(e)
			},
			inLength(e) {
				this.reCalcPaddingLength()
				console.warn('新子元素宽度：',this.inLength)
			},
			outerLength(e) {
				this.reCalcPaddingLength()
				console.warn('新容器宽度：',this.inLength)
			},
			listLen(v){
				this.reCalcPaddingLength()
				console.log('新子元素数量',v)
			}

		},
		methods: {
			// 动态调整需要补充的块
			reCalcPaddingLength() {
					// let listLen=20      //子元素的数量
					// let outLength=1000   //容器的宽度
					let outLength = this.outerLength  //容器的宽度
					let inLength = this.inLength //每个元素的宽度
					let lineCapacity = Math.floor(outLength / inLength) // 计算每行放几个
					let paddingLength = Math.floor(this.listLen / lineCapacity) // 计算可以放几行
					let nums = lineCapacity - (this.listLen - (lineCapacity * paddingLength))
					if (lineCapacity == nums  || lineCapacity==this.listLen) {
						nums = 0
					}
					console.log('新的数量:',nums)
					this.nums = nums

			}
		}
	}
</script>

<style>

</style>
